<template>
  <div class="invitors-wrap ig-invitors-wrap">
    <Header-Comp ref="header" title="超级会员参与者">
      <div :class="['nav_right',isActivity? 'showTip':'']" slot="rightContent" @click="toActive">活动</div>
    </Header-Comp>

    <!-- tabbar -->
    <ul class="ig-tab-wrap" @click="handleTab">
      <li
        class="tab-item"
        :class="{ 'tab-active': curTab === tab.id }"
        v-for="tab in tabList"
        :key="tab.id"
        :data-idx="tab.id"
      >
        <!-- poit-tip -->
        <span :class="{ 'poit-tip': tab.showPoit }" :data-idx="tab.id">{{
          tab.title
        }}</span>
      </li>
    </ul>
    <div  class="noInfo loading"  v-show="showLoading">
        <img src="../../../assets/img/flow/loading.gif" class="img" alt />
    </div>
    <!-- list -->
    <van-pull-refresh
      class="list-wrap ig-list-wrap_h"
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
    
      <van-list
        class="list-item"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <template v-if="list.length">
          <list-item
            class="list-inner"
            v-for="(item, idx) in list"
            :key="`${item.id}${idx}`"
            :curTab="curTab"
            :item="item"
            @init="initCurList"
          />
        </template>
        <template v-else>
          <fhb-empty
            showEmptyImg
            :emptyImg="emptyImg"
            :emptyText="curTab | filEmptyText"
          />
        </template>
         
      </van-list>
      
    </van-pull-refresh>
  </div>
</template>

<script>
import ListItem from "./components/ListItem.vue";
import { debounce } from "lodash-es";
import { queryInvitedStatus, queryRecord, queryWaitRecord,getActivityRedDot } from "@/api/flow/index";

const emptyImg = require("@/assets/img/empty-data.png");
const POITKEY = {
  0: {
    key: "waitForHandleRedDot",
    cooperate: "2",
    emptyText: "暂无处理商户",
  },
  1: {
    key: "inCooperationRedDot",
    cooperate: "1",
    emptyText: "暂无合作商户",
  },
  2: {
    key: "exitedRedDot",
    cooperate: "0",
    emptyText: "暂无退出商户",
  },
};
export default {
  data() {
    return {
      curTab: "0",
      emptyImg,
      tabList: [
        {
          id: "0",
          showPoit: false,
          title: "处理中",
        },
        {
          id: "1",
          showPoit: false,
          title: "合作中",
        },
        {
          id: "2",
          showPoit: false,
          title: "已退出",
        },
      ],
      isActivity:false,
      refreshLoading: false, // 刷新状态
      loading:false,
      finished: false, // 没有更多了
      showLoading:false,
      list: [],
      poitData: {},
      form: {
        merchantId: this.$route.query.merchantId,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },

  components: {
    ListItem,
  },

  mounted() {
    this.$swiper = this.$refs.swiper || null;
    this.initCurList();
  },

  filters: {
    filEmptyText(idx) {
      return POITKEY[idx].emptyText || "暂无数据";
    },
  },

  methods: {
    // 初始化当前数据
    initCurList() {
      this.showLoading = true
      this.refreshLoading = false;
      this.loading = false;
      this.finished = false;
      this.list.length = 0;
      this.form.pageNum = 1;
      this.initPoit();
      this.getList();
    },
    toActive() {
      this.$router.push({ path: "/surperActivity" });
    },

    // 获取是否有poit提示
    initPoit() {
      queryInvitedStatus({ merchantId: this.form.merchantId }).then((res) => {
        const { code, data } = res.data || {};
        if (code === 0 && data) {
          this.tabList.forEach((i) => {
            i.showPoit = data[POITKEY[i.id].key] || false;
          });
        }
      });
       getActivityRedDot({merchantId: this.form.merchantId}).then(res=>{
           const { code, data } = res.data || {}
           if(code == 0){
               this.isActivity = data
           }
      })
      
    },
    // 获取列表
    getList: debounce(async function () {
      try {
        const _curTab = this.curTab;
        if (this.loading || this.finished)
          return console.log("loading or finished",);
        this.loading = true;
        const form = this.form;
        const cooperate = POITKEY[_curTab].cooperate;
        const params = { ...form, cooperate };
        const {
          status,
          data: { code, msg, data },
        } =
          (cooperate === "2"
            ? await queryWaitRecord(params)
            : await queryRecord(params)) || {};
        if (status === 200 && code === 0 && data) {
          this.form.pageNum++;
          this.list = [...this.list, ...data.list];
          this.finished = data.pages === data.pageNum;
          if(_curTab == 1){
            this.list.forEach(item=>{
              item.afterDiscount = `${item.afterDiscount}`
              item.afterRakeRate = `${item.afterRakeRate}`
              item.afterDeductionRatio = `${item.afterDeductionRatio}`
              item.afterFinancingParty = `${item.afterFinancingParty}`
            })
          }
          
        }
        this.showLoading = false
        this.loading = false;
      } catch (error) {
        this.showLoading = false
        this.loading = false;
        this.$toast("请求失败");
      }
    }, 250),

    handleTab: debounce(function (e) {
      const { idx } = e.target.dataset || e.srcElement.dataset;
      const _curTab = this.curTab;
      if (idx === _curTab) return;
      this.list.refreshLoading && (this.list.refreshLoading = false);
      this.curTab = idx;
      this.initCurList();
      this.$swiper && this.$swiper.swipeTo(idx);
    }, 180),

    onSwiperChange(idx) {
      this.curTab = String(idx);
      this.initCurList();
    },

    onRefresh() {
      let refreshTimer = setTimeout(() => {
        this.refreshLoading = false;
        clearTimeout(refreshTimer);
        refreshTimer = null;
      }, 1000);
    },
  },
};
</script>


<style lang="less" scoped>
@primary: #feb518;
@success: #4ab759;
@error: #f05357;
/deep/ .van-swipe__indicators {
  display: none;
}
.ig-invitors-wrap {
  padding-top: 40px; // header 46(vant) + 40 tabbar
}
/deep/.van-nav-bar{
  z-index: 1111;
}
.noInfo{
  position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
    z-index: 1;
    .img{
      width: 150px;
      height: 150px;
    }
}
.invitors-wrap {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  .nav_right {
    color: @primary;
    position: relative;
    
  }
  .showTip{
      &::after {
      width: 12px;
      height: 12px;
      background: #ff0000;
      border-radius: 50%;
      position: absolute;
      top: -0px;
      right: -12px;
      content: "";
    }
  }
  .ig-tab-wrap {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    justify-content: center;
    width: 100%;
    height: 40px;
    overflow: hidden;
    margin: 46px auto 0;
    background: #fff;
    .tab-item {
      position: relative;
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 15px;
      .poit-tip {
        position: relative;
        &::after {
          position: absolute;
          top: 0;
          right: -6px;
          display: inline-block;
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: @primary;
        }
      }
    }
    .tab-active {
      color: @primary;
      &::after {
        display: inline-block;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        content: "";
        width: 50px;
        height: 3px;
        border-radius: 2px;
        background: @primary;
      }
    }
  }

  .list-wrap {
    width: 100%;
    // margin: 0 auto;
    overflow-y: auto;
    padding: 0 30px 24px;
    position: relative;
    .list-item {
      width: 100%;
      height: 100%;
    }
  }
  .ig-list-wrap_h {
    height: calc(100vh - 86px);
  }
}
</style>